<!-- 文件上传基础组件 -->
<template>
  <div class="file_wrap">
    <el-upload ref="uploadFile" v-on="$listeners" v-bind="$attrs" :accept="accept" :file-list="list" :show-file-list="showFileList" :multiple="multiple" :http-request="httpRequest" :auto-upload="false" class="upload-demo" action="#" :on-change="FileChange" :before-upload="fileUpload" :on-progress="fileProgress" :on-error="fileError" :before-remove="fileRemove" :limit="limit">
      <el-button type="primary">点击新增</el-button>
    </el-upload>
    <el-button @click="submit">点击上传</el-button>
  </div>
</template>

<script>
export default {
  name: 'file_upload',
  props: {
    showFileList: { type: Boolean, default: true },
    fileList: { type: Array, default() { return [] } },
    accept: { type: String, default: '' },
    multiple: { type: Boolean, default: false },
    limit: { type: Number, default: 99 }
  },
  data() {
    return {
      list: []
    }
  },
  watch: {
    fileList: {
      handler(newValue, oldValue) {
        if (newValue.length) {
          this.list = newValue
        } else {
          this.list = []
        }
      }
    }
  },
  methods: {
    //上传文件之前的钩子
    fileUpload(file) {//function(file)	
      console.log('上传文件之前', file)
      let fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1)
      if (this.accept && this.accept.indexOf(fileSuffix) == -1) {
        this.$message.error(`上传文件只能是 ${this.accept} 格式`)
        return false
      }
    },
    //文件上传时
    fileProgress(event, file, fileList) {//function(event, file, fileList)
      console.log('文件上传时', event, file, fileList)
    },
    //文件上传失败时的钩子
    fileError(err, file, fileList) {//function(err, file, fileList)
      console.log('文件上传失败时的钩子', err, file, fileList)
    },
    //删除文件之前的钩子
    fileRemove(file, fileList) {//function(file, fileList)删除前的fileList
      console.log('删除文件之前的钩子', file, fileList, this.list)
      let findIndex = this.list.findIndex(item => {
        return item === file
      })
      this.list.splice(findIndex, 1)
      this.$nextTick(() => {
        console.log(this.list, fileList, 'this.list')
      })
    },
    //自定义上传
    httpRequest(param) {
      console.log('自定义上传', param, '---------')
      let formDate = new FormData()
      this.list.forEach(item => {
        formDate.append('files', item.raw)
      })
      this.request({
        url: '/api/file/wsfj',
        method: 'post',
        data: formDate,
        onUploadProgress: function (progressEvent) {
          console.log(progressEvent, 'progressEvent')
          // 处理原生进度事件
          let num = progressEvent.loaded / progressEvent.total * 100 | 0;
          param.onProgress({ percent: num })     //进度条
        },
      })
    },
    // //文件状态改变时
    FileChange(file, fileList) {//function(file, fileList)
      if (this.accept) {

      } else {

      }
      if (!this.multiple) this.list = []
      this.list = fileList
      console.log('文件状态改变时', file, fileList, this.list, 'this.list--')

    },
    submit() {
      this.$refs.uploadFile.submit()
    }

  }
}
</script>

<style>
</style>